<template>
    <div class="content">
		<div v-if="!show" class="add"  @click="goAddCard(-1)">
			添加银行卡
		</div>
		<div v-else class="container">
			<div v-for="(item,index) in data" :key="index">
				<div class="item">
					<div class="title">{{item.open_bank}}</div>
					<div class="card">
						
					</div>
					<div class="number">{{item.bank_num | filterNumber}}</div>
				</div>
				<div class="add" @click="goAddCard(item.id)">
					编辑银行卡
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data(){
        return {
			show: false,
			data:[]
        }
	},
	mounted() {
		this.loadData()
	},
    methods: {
		loadData(){
			this.$http.post('/api/withdraw/bankList').then(res => {
				console.log(res)
				if(res.data.data.length == 0){
					this.show = false;
				}else{
					this.show = true;
				}
				this.data = res.data.data
			})
		},
        goAddCard(id){
            this.$router.push({path:'/addCard',query:{id}})
        }
    },
    filters:{
        filterNumber(val){
            val = val.replace(/\D/g, '') 
            val = val.replace(/(\d{4})(?=\d)/g, '$1 ');
            return val
        }
    },
}
</script>
<style lang="scss" scoped="scoped">
    .add{
		width:91vw;
		height:10.663vw;
		background:rgba(231,188,134,1);
		border-radius:10px;
		margin: 5.33vw auto;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height: 10.663vw;
		text-align: center;
	}
	.container{
		margin-top: .9375rem;
		.item{
			width: 91vw;
			margin: 0 auto 2.66vw;
			padding: 4vw;
			box-sizing: border-box;
			background:rgba(231,188,134,1);
			border-radius:10px;
			.title{
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
			}
			.card{
				font-size:12px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				margin: 38rpx 0 33rpx;
			}
			.number{
				font-size:16px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
			}
		}
	}
</style>